<template>
    <!-- 分页 -->
    <div class="fr page w">
        <!-- <h5>{{ startNumAndEndNum }}---当前页{{ pageNo }}</h5> -->
        <div class="sui-pagination clearfix">
            <ul>
                <!-- @click="$emit('getPageNo',pageNo-1 )" -->
                <li class="prev" :class="{disabled:(pageNo == 1)}" @click="$emit('getPageNo', pageNo - 1)">
                    <a href="#">«上一页</a>
                </li>
                <li v-show="startNumAndEndNum.start >= 2">
                    <a href="#">1</a>
                </li>
                <li class="dotted" v-show="startNumAndEndNum.start >= 3"><span>...</span></li>

                <!-- 中间部分 -->
                <li v-for="(page, index) in startNumAndEndNum.end" v-show="page >= startNumAndEndNum.start" :key="index"
                    :class="{ active: isPageNo(page) }">
                    <a href="#" v-if="page >= startNumAndEndNum.start" @click="$emit('getPageNo', page)"
                        :class="{ active: pageNo == page }">{{ page }}</a>
                </li>
                <!-- 中间部分 -->

                <li class="dotted" v-if="startNumAndEndNum.end < totalPages - 1"><span>...</span></li>
                <li>
                    <a href="#" v-if="startNumAndEndNum.end < totalPages" @click="$emit('getPageNo', totalPages)">{{
                            totalPages
                    }}</a>
                </li>

                <li class="next" :class="{disabled:(pageNo == totalPages)}" @click="$emit('getPageNo', pageNo + 1)">
                    <a href="#">下一页»</a>
                </li>
            </ul>
            <div><span>共{{ total }}条&nbsp;</span></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PageinatonIndex',
    // 'pageNo':当前页, 'pageSize'：每页展示数据个数, 'total'：总商品个数, 'continues'：连续页数个数]
    props: ['pageNo', 'pageSize', 'total', 'continues'],
    computed: {

        // 共有多少页
        totalPages() {
            // 向上取整
            return Math.ceil(this.total / this.pageSize);
        },
        //计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]
        startNumAndEndNum() {
            const { continues, pageNo, totalPages } = this;
            //先定义两个变量存储起始数字与结束数字
            let start = 0,
                end = 0;
            //连续页码数字5【就是至少五页】，如果出现不正常的现象【就是不够五页】
            //不正常现象【总页数没有连续页码多】
            if (continues > totalPages) {
                start = 1;
                end = totalPages;
            } else {
                //正常现象【连续页码5，但是你的总页数一定是大于5的】
                //起始数字
                start = pageNo - parseInt(continues / 2);
                //结束数字
                end = pageNo + parseInt(continues / 2);
                //把出现不正常的现象【start数字出现0|负数】纠正
                if (start < 1) {
                    start = 1;
                    end = continues;
                }
                //把出现不正常的现象[end数字大于总页码]纠正
                if (end > totalPages) {
                    end = totalPages;
                    start = totalPages - continues + 1;
                }

            }
            return { start, end };
        },
    },
    methods: {
        isPageNo(page) {
            return (page == this.pageNo) ? true : false

        },
    }

}
</script>

<style scoped lang="css"> 
.disabled {
    color: #c0c4cc;
    cursor: not-allowed;
}

.page {
    text-align: center;
    height: 66px;
    overflow: hidden;
    float: right;
}

.page .sui-pagination {
    margin: 18px 0;
}

.page .sui-pagination ul {
    margin-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
    float: left;
}

.page .sui-pagination ul li {
    line-height: 18px;
    display: inline-block;
}

.page .sui-pagination ul li a {
    position: relative;
    float: left;
    line-height: 18px;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #e0e9ee;
    margin-left: -1px;
    font-size: 14px;
    padding: 9px 18px;
    color: #333;
}

.page .sui-pagination ul li.active a {
    background-color: #fff;
    color: #e1251b;
    border-color: #fff;
    cursor: default;
}

.page .sui-pagination ul .prev a {
    background-color: #fafafa;
}

.page .sui-pagination ul .disabled a {
    color: #999;
    cursor: default;
}

.page .sui-pagination ul li.dotted span {
    margin-left: -1px;
    position: relative;
    float: left;
    line-height: 18px;
    text-decoration: none;
    background-color: #fff;
    font-size: 14px;
    border: 0;
    padding: 9px 18px;
    color: #333;
}

.page .sui-pagination ul li.next a {
    background-color: #fafafa;
}

.page .sui-pagination div {
    line-height: 36px;
    color: #333;
    font-size: 14px;
    float: right;
    width: 241px;
}
</style>